/* eslint-disable vue/valid-v-bind */
<template>
  <!-- //   先介绍一下背景
//   首先头顶上有一个保存按钮,用来上传图片的
//   下面是内容 , 有一个input框,type=file.. 有一个button, 用来代替input去选择文件
//   我的后台是要从请求的api里拿到上传的url地址,再通过头顶的保存按钮上传,之后返回一个图片的url地址,动态绑定到页面的img标签上显示出来
//   参考了网上一些写法, 我这里只为了实现功能, 不做其它处理

// 样式就不写了, 最后贴张图 -->
  <div class="main">
    <!-- 保存可以参考这个方法 -->
    <!-- <div @click="onUpload">保存</div> -->
    <!-- //顶部上传按钮 -->
    <el-button
      type="text"
      :disabled="canInput"
      class="xunzeimage"
      @click="onPickFile"
    ><i class="el-icon-plus"></i></el-button>
    <!-- {{ name }} -->
    <!-- //把下面input隐藏,代替它选择文件 -->
    <!-- {{ pictureData }} -->
    <input
      ref="fileInput"
      type="file"
      accept="application/pdf, image/*"
      style="display: none"
      @change="getFile"
    />
    <!-- //选择文件 -->
    <div v-for="(item, index) in imgUrlList" :key="index" class="imgUrl">
      <el-button v-if="item.pictureData" :disabled="canInput" type="text" @click="delImg(index)"><i class="el-icon-close"></i></el-button>
      <img v-if="item.pictureData" :src="'data:image/png;base64,' + item.pictureData" alt="" />
      <!-- <pdf v-if="item.pictureData" :src="'data:application/pdf;base64,' + item.pictureData" alt="" /> -->
      <!-- <img :src="imageUrl" /> -->
    </div>
    <!-- //选择文件 -->
    <div v-if="numPages !== 0" class="imgUrls" @click="numPagesSrc">
      <el-button v-if="numPages !== 0" :disabled="canInput" type="text" @click.prevent.stop="delpdf(index)"><i class="el-icon-close"></i></el-button>
      <pdf v-for="i in numPages" :key="i" ref="myPdfComponent" :src="src" :page="i" />
    </div>
    <el-dialog
      title="承租合同"
      :visible.sync="dialogNumPagesTextVisible"
      width="60%"
      class="Contract"
    >
      <pdf v-for="i in numPages" :key="i" ref="myPdfComponent" :src="src" :page="i" />
    </el-dialog>
  <!-- //绑定文件地址 -->
  </div>
</template>

<script>
// import axios from "axios"; //获取上传的链接//引入vue-pdf
import pdf from 'vue-pdf'
// 解决部分文字不显示的问题
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
export default {
  // name: "whatever",
  components: { pdf },
  props: {
    // imgUrl: {
    //   type: Array,
    //   default: () => ([])
    // },
    canInput: {
      type: Boolean,
      required: true
    },
    imgUrlList: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      imgUrl: [],
      imageUrl: "", // img绑定的src地址
      postUrl: "", // 需要上传到的地址
      name: "",
      src: '',
      numPages: 0,
      numPagesText: '',
      dialogNumPagesTextVisible: false
    //   imgUrlList: []
    };
  },
  watch: {
    imgUrlList(val) {
      if (val.length > 0) {
        val.forEach(item => {
          this.busLicContent = 'data:application/pdf;base64,' + item.pictureData;
          this.src = pdf.createLoadingTask({ url: this.busLicContent, CMapReaderFactory });
          this.src.promise.then(pdf => {
            this.numPages = pdf.numPages;
          });
        })
        // this.numPagesText = val[0]['pictureData']
      } else {
        this.src = ''
        this.numPages = 0
      }
    }
  },
  mounted() {
    // 第一步:先请求一下api,看看需要上传到哪里去,存到postUrl里面 ( 做了跨域配置,所以直接写成了api )
    // axios.get("api/getUploadInfo?type=image").then(res => {
    //   if (res.status === 200 && res.data) {
    //     let data = res.data.data;
    //     let postUrl = data.url;
    //     console.log(postUrl); //页面挂载后,先打印一下,拿到了需要上传到的url地址   ( 第一次有效打印 )
    //     this.postUrl = postUrl; //把地址保存下来
    //   }
    // });
  },
  methods: {
    // 第二步:再来写个方法, button代替input选择图片
    onPickFile() {
      this.$refs.fileInput.click();
    },
    // 删除
    delImg(index) {
      this.imgUrl.splice(index, 1);
      this.imgUrlList.splice(index, 1);
      //   console.log(this.imgUrl)
      this.$emit('child-event', this.imgUrl)
    },
    // 删除
    delpdf(index) {
      this.src = '';
      this.imgUrl.splice(index, 1);
      this.imgUrlList.splice(index, 1);
      this.$emit('child-event', this.imgUrl)
    },
    // 第三步: 文件选择后, 后在页面上显示出来    转base64位的操作
    getFile(event) {
      const files = event.target.files;
      let filename = files[files.length - 1].name; // 只有一个文件
      //   this.name = filename
      //   this.$emit('ika-img', this.name)
      // console.log(filename)
      // let formatname = filename.substr(filename.lastIndexOf(".") + 1);
      if (filename.substr(filename.lastIndexOf(".") + 1) === 'pdf') {
        // return alert("请添加一张图片!"); // 判断图片是否有效
        const fileReader = new FileReader(); // 内置方法new FileReader()   读取文件
        // fileReader.readAsDataURL(files[files.length - 1]);
        fileReader.readAsBinaryString(files[files.length - 1]);
        fileReader.addEventListener("load", () => {
          this.imageUrl = window.btoa(fileReader.result.toString());
          // this.imageUrl = fileReader.result;
          // console.log(this.imageUrl)
          this.$emit('child-event', this.imageUrl)
          // console.log(this.imageUrl)
          // this.numPagesText = JSON.parse(JSON.stringify(this.imageUrl))
          this.busLicContent = 'data:application/pdf;base64,' + this.imageUrl;
          this.src = pdf.createLoadingTask({ url: this.busLicContent, CMapReaderFactory });
          this.src.promise.then(pdf => {
            this.numPages = pdf.numPages;
          });
          this.imgUrl.push({ pictureData: this.imageUrl })
          // console.log(this.imgUrl)

          this.$emit('child-event', this.imgUrl)
          // if (this.imgUrl[0].pictureData) {
          //   this.imgUrlList.push({ pictureData: this.imageUrl })
          // }
        // console.log(this.imgUrl)
        // this.imageUrl = "data:image/png;base64," + this.imageUrl
        });
      } else {
        const fileReader = new FileReader(); // 内置方法new FileReader()   读取文件
        // fileReader.readAsDataURL(files[files.length - 1]);
        fileReader.readAsBinaryString(files[files.length - 1]);
        fileReader.addEventListener("load", () => {
          this.imageUrl = window.btoa(fileReader.result.toString());
          // this.imageUrl = fileReader.result;
          this.$emit('child-event', this.imageUrl)
          this.imgUrl.push({ pictureData: this.imageUrl })
          this.$emit('child-event', this.imgUrl)
          if (this.imgUrl[0].pictureData) {
            this.imgUrlList.push({ pictureData: this.imageUrl })
          }
          // this.imageUrl = "data:image/png;base64," + this.imageUrl
        });
      }
      // fileReader.readAsBinaryString(files[files.length - 1]);
      // fileReader.onload = function(f) {
      //   this.imageUrl = fileReader.result;
      // }
    //   this.image = files[files.length - 1];
      // 到这里后, 选择图片就可以显示出来了
      // console.log(this.image)
      // 子组件向父组件传值
    },
    numPagesSrc() {
      this.dialogNumPagesTextVisible = true
      // this.busLicContent = 'data:application/pdf;base64,' + this.numPagesText;
      // this.src = pdf.createLoadingTask({ url: this.busLicContent, CMapReaderFactory });
      // this.src.promise.then(pdf => {
      //   this.numPages = pdf.numPages;
      // });
    }
    // 第四步: 上传文件了
    // onUpload(event) {
    //   event.preventDefault();
    //   let fd = new FormData(); //内置方法new FormData()  新建一个表格
    //   fd.append("file", this.image); //把image添加进去
    //   console.log(this.image); //(       第二次有效打印           )
    //   axios
    //     .post(this.postUrl, fd)
    //     .then(res => {
    //       //第一个参:this.postUrl就是上面保存好的要上传的地址
    //       console.log(res); //(      第三次有效打印    )
    //       if (res.status === 200 && res.data) {
    //         let data = res.data.data;
    //         let imageUrl = data.url; //上传成功 , 后台返回了一个图片地址
    //         this.imageUrl = imageUrl;
    //       }
    //     })
    //     .catch(error => {
    //       console.log(error);
    //     });
    // }
  }
};
</script>
<style lang="scss" scoped>
.main {
    display: flex;
    flex-direction: column;
    .xunzeimage{
        border: 1px solid #6ecae3;
        width: 40px;
        height: 40px;
        padding: 0;
        background-color: transparent;
        line-height: 40px;
        border-radius: 4px;
        color: rgb(161, 154, 154);
        font-weight: 600;
        /* position: relative; */
        i {
            font-size: 40px;
        }
        /* height: 40px; */
        /* margin-left: -10px; */
    }
    .imgUrl {
        width: 70%;
        position: relative;
        .el-button {
            display: none;
            position:absolute;
            top: -5px;
            right: -5px;
        }
        img{
            width: 100%;
            margin: 10px 0;
        }
    }
    .imgUrl:hover {
        .el-button {
            display: block;
        }
    }
    .imgUrls {
        width: 100%;
        position: relative;
        .el-button {
            display: none;
            position:absolute;
            z-index: 9999;
            top: -5px;
            right: 5px;
        }
    }
    .imgUrls:hover {
        .el-button {
            display: block;
        }
    }
}

.el-icon-close {
  font-size: 24px;
}
::v-deep .el-button--text {
    color: #ff4040;
}
.el-button.is-disabled.el-button--text {
    background-color: transparent;
    color: #C0C4CC;
}
</style>
